<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body,
    html {
      height: 100%;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div {
      width: 400px;
      height: 300px;
      margin-bottom: 200px;
      background-color: deeppink;
      cursor: pointer;
    }
  </style>
  <!-- 
    节流的原理:
      持续触发事件，每隔一段时间，只执行一次
   -->
</head>

<body>
  <div></div>
</body>
<script>
  "use strict"; {
    let div = document.querySelector("div");
    {
      // 第一次会触发，最后一次不会调用
      const jieliu = ({ func, wait } = {}) => {
        let old = 0;
        return () => {
          console.log(`kangieningegi`);
          let now = new Date().valueOf();
          if (now - old > wait) {
            // 执行该方法
            func();
            old = now;
          };
        };
      };
      let zuo = () => {
        console.log(`做了吧哈哈`);
      };
      div.onmousemove = jieliu({ func: zuo, wait: 1000 });
    };
    {
      // 第一次不会触发，最后一次调用(顾头不顾尾)
      const throttle = ({ func, wait }) => {
        let content, args, timeout;
        return () => {
          content = this;
          if (!timeout) {
            timeout = setTimeout(() => {
              timeout = null;
              func();
            }, wait);
          };
        };
      };
    };
    {
      // 有头有尾(第一次直接执行，最后一次还会再执行)
      
    };
  };
</script>

</html>